<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {pageBulletinAPI} from "@/apis/bulletin.ts";
//中间岗列表
const data = <any>reactive([]);
const getBulletinList = async () => {
  const res = await pageBulletinAPI({
    pageCurrent: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });
  if (res.data.flag) {
    pagination.value.total = res.data.data.total
    data.push(...res.data.data.data)
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getBulletinList();
})

const columns = [
  {
    title: '公告标题',
    dataIndex: 'bulletinTitle',
    key: 'bulletinTitle',
    width: 200,
  },
  {
    title: '公告状态',
    dataIndex: 'bulletinStatus',
    key: 'bulletinStatus',
    width: 100,
  },
  {
    title: '创建者',
    dataIndex: 'bulletinCreateName',
    key: 'bulletinCreateName',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'bulletinCreateTime',
    key: 'bulletinCreateTime',
    width: 120,
    customRender: ({text}) => {
      const date = new Date(text);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  {
    title: '公告内容',
    dataIndex: 'bulletinText',
    key: 'bulletinText',
    width: 'auto', // 设置宽度自动
    ellipsis: true // 开启省略号显示
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 100,
  },
];


// 分页配置
const pagination = ref({
  current: 1, // 当前页码，初始为第 1 页
  pageSize: 8, // 每页显示的记录数
  total: 0, // 数据总条数
});

// 处理表格变化（如分页、排序、筛选）的回调函数
const handleTableChange = (paginationInfo: any) => {
  pagination.value.current = paginationInfo.current;
  pagination.value.pageSize = paginationInfo.pageSize;
  data.splice(0, data.length);
  getBulletinList();
};
//编辑
const router = useRouter();
const goToBulletinDetail = (bulletinId: string) => {
  router.push({
    name: 'bulletinDetail',
    params: {
      bulletinId: bulletinId // 确保传递的参数为字符串类型
    }
  });
};
</script>

<template>
  <div class="title">
    <h1>公告列表</h1>
  </div>
  <div class="content_table">
    <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button ghost type="primary" @click="goToBulletinDetail(record.bulletinId)">编辑</a-button>
        </template>
      </template>
    </a-table>
  </div>

</template>

<style scoped>
.content_table {
  width: 100%;
  flex-grow: 1;
  height: 80%;
  overflow: auto; /* 内容超出时自动显示滚动条 */
}
</style>
